<template>
  <div>
    <van-nav-bar
      title="我的跟帖"
      left-arrow
      @click-left="$router.go(-1)"
      @click-right="$router.push({ path: '/' })"
    >
      <template #right>
        <van-icon name="wap-home-o" size="6vw" />
      </template>
    </van-nav-bar>
    <!-- 2.0 评论列表 -->
    <div class="list">
      <div class="item" v-for="item in CommentList" :key="item.id">
        <p class="date">{{item.create_date | formatDate}}</p>
        <div class="parent" v-if="item.parent">
          <p>回复:{{item.parent.user.nickname}}</p>
          <p>{{item.parent.content}}</p>
        </div>
        <p class="comment">{{item.content}}</p>
        <p class="article">
          <router-link 
          class="article_link"
          :to="`/article/${item.post.id}`"
          >
          原文:{{item.post.title}}
          </router-link>
        </p>
      </div>
    </div>
    <!-- 3.0 空列表 -->
    <van-empty v-if="!CommentList.length" description="空空如也" />

  </div>
</template>

<script>
import {getcommentsAPI} from '../apis/user'
export default {
  data () {
    return {
      CommentList:[],
    }
  },
  async created () {
    const res = await getcommentsAPI();
    console.log(res);
    this.CommentList = res.data.data
  }
}
</script>

<style lang="less" scoped>
  .list{
    .item{
      padding: 10px;
      border-bottom: 1px solid #ddd;
      p{
        margin: 10px 0;
      }
      .date{
        color: #666;
        font-size: 13px;
      }
      .comment{
        font-size: 14px;
      }
      .article{
        font-size: 14px;
        color:#999;
        display: flex;
      }
      .article_link{
        color: inherit;
        width: 80%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    .parent{
      background-color: #e4e4e4;
      color: #666;
      font-size: 12px;
      padding: 5px;
    }
  }
</style>